<template>
    <div class="main">
      <div class="login">
        <div class="form">
          <h1>用户注册</h1>
          <el-form
            style="padding: 10px"
            class="login-form"
            :model="form"
            ref="formRef"
            :rules="rules"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item prop="username" :label-width="80">
                  <el-input
                    placeholder="请输入用户名"
                    v-model="form.username"
                    style="height: 40px"
                    autocomplete="off"
                    :prefix-icon="User"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="password" :label-width="80">
                  <el-input
                    type="password"
                    show-password
                    placeholder="请输入密码"
                    v-model="form.password"
                    style="height: 40px"
                    autocomplete="off"
                    :prefix-icon="Lock"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item prop="captcha" :label-width="80">
                  <el-input
                    placeholder="请输入验证码"
                    v-model="form.captcha"
                    maxlength="5"
                    minLength="5"
                    style="height: 40px"
                    autocomplete="off"
                    :prefix-icon="Message"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <img
                  class="captcha"
                  :src="captchaUrl"
                  style="height: 40px"
                  @click="refresh"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button
                  type="primary"
                  round
                  class="login-btn"
                  @click="onRegister"
                >
                  注册
                </el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="text-align: center; margin-top: 10px;">
                <el-button type="text" @click="goLogin">
                  已有账号？去登录
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import { register } from "@/api/AdminApi";
  import { User, Lock, Message } from "@element-plus/icons-vue";
  
  const router = useRouter();
  
  const form = ref({
    username: "",
    password: "",
    captcha: "",
  });
  const formRef = ref(null);
  const captchaUrl = ref("/api/admin/captcha");
  
  function refresh() {
    captchaUrl.value = "/api/admin/captcha?id=" + Math.random();
  }
  onMounted(refresh);
  
  const rules = ref({
    username: [{ required: true, message: "用户名不可为空" }],
    password: [{ required: true, message: "密码不可为空" }],
    captcha: [
      { required: true, message: "验证码不可为空" },
      { min: 5, max: 5, message: "验证码只能是5位" },
    ],
  });
  
  async function onRegister() {
    formRef.value.validate(async (valid) => {
      if (valid) {
        const resp = await register(form.value);
        if (resp.code === 200) {
          ElMessage.success("注册成功，请登录！");
          console.log("用户名:", form.value.username);
          console.log("密码:", form.value.password);
          console.log("验证码:", form.value.captcha);
          router.push("/login");
        } else {
          ElMessage.error(resp.error || "注册失败");
          refresh();
        }
      }
    });
  }
  
  function goLogin() {
    router.push("/login");
  }
  </script>
  
  <style scoped>
  .main {
    height: 100%;
    background: url("@/assets/login.png") no-repeat center center/cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login {
    width: 500px;
    height: 350px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  .form {
    width: 100%;
    text-align: center;
  }
  .login-form {
    width: 80%;
    margin: 0 left;
  }
  .login h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }
  .login-btn {
    width: 50%;
    height: 50px;
    background-color: #ccc;
    color: black;
    font-size: 18px;
  }
  .captcha {
    cursor: pointer;
    width: 160px;
  }
  </style>
  